import { Flex } from "antd"
import { Navigate, Route, Routes } from "react-router"
import { Issue } from "../../page/issue"
import { Book } from "../../page/book"
import { QA } from "../../page/qa"
import { IssueDetail } from "../../page/issueDetail"
import { IssueEdit } from "../../page/issueEdit"
import { RouterAuth } from "../RouterAuth"
import { Home } from "../../page/home"
import { Search } from "../../page/search"


const style: React.CSSProperties = {
    minHeight: "calc(100vh - 100px - 100px)",
    width:1200,
    margin:"0 auto"
}
export const Content = () => {
    return(
        <Flex style={style} vertical>
            {/* <div style={{height:100}}></div> */}
            <Routes>
                <Route path="/" element={<Navigate to="/issue"></Navigate>}></Route>
                <Route path="/issue" element={<Issue></Issue>}></Route>
                <Route path="/book" element={<Book></Book>}></Route>
                <Route path="/qa" element={<QA></QA>}></Route>
                <Route path="/home" element={<RouterAuth><Home></Home></RouterAuth>}></Route>
                <Route path="/issue/:id" element={<IssueDetail></IssueDetail>}></Route>
                <Route path="/editissue" element={<IssueEdit></IssueEdit>}></Route>
                <Route path="/search" element={<Search></Search>}></Route>
            </Routes>
        </Flex>
    )
}